HTTP 요청이 일어날 때, 서버는 CORS Preflight request를 통해 현재 보내는 요청에 대한 CORS(Cross-Origin Resource Sharing)정보를 확인한다.
보통 브라우저에서 preflight request를 자동으로 보내기 때문에 프론트엔드에서 직접 만들지 않아도 된다. 또, 매우 단순한 요청은 preflight request를 하지 않는다.
2021-10-02 추가
요청 수(서버비용)를 줄이기 위해 CORS를 Caching하는 방법.
OPTIONS 요청은 기본적으로 캐싱할 수 없다. CDN에서도 처리 하지 않기 때문에 항상 서버로 왔다갔다 한다. CORS를 가능하게 하는 Preflight Request는 OPTIONS 요청이다. 예외적으로 5초간 클라이언트에서 캐싱된다. 만약 API polling이 10초마다 일어난다면 Preflight Request는 계속 서버로 갈것이다. 어떻게 캐싱할 수 있을까?
브라우저 캐싱을 위해서는 아래 옵션을 추가하면 된다. 초 단위로 캐싱된다.
Access-Control-Max-Age: 86400
하지만 브라우저마다 제한이 있다. 파이어폭스의 경우 86400(24시간)이고 크롬은 7200(2시간)이다. 그래도 5초보다는 장족의 발전이다.
CORS를 CDN 캐싱하기
브라우저와 서버 사이에 있는 CDN이나 다른 proxy가 CORS처리를 캐싱하게 하려면 다음을 추가하면된다.
Cache-Control: public, max-age=86400
Vary: origin
유의할 점은 이 방법은 표준은 아니다. 그러나 대부분의 CDN이 지원하긴 한다. 대신 명시적으로 옵션을 줘야한다.
Vary 헤더를 빼먹으면 안된다. 이 요청에 대한 결과를 같은 origin 헤더를 가진 요청에만 사용하라고 명시하는 것이다. (same cross-origin source에 대한 요청만 허용).
Preflight Request에 대한 응답은 일반적으로 요청 Origin과 같은 값의 Access-Control-Allow-Origin 값만을 포함하므로, 만약 Vary 헤더를 주지 않고 Preflight Request의 응답을 캐싱한다면, 다른 origin의 요청에 대한 처리가 잘 안되어 모든 요청에 대한 CORS가 실패할 수 있다.
...
🔗